<template>
  <div class="confirm">
    <div class="wrapper">
      <h1 class="title">{{ txt }}</h1>
      <div class="options">
        <span @click.stop="yes">确认</span>
        <span @click.stop="no">取消</span>
      </div>
    </div>
  </div>
</template>

<script>
  import {confirm} from "@/config/mode-config/config";

  export default {
        name: "Confirm",
        props: {
            txt: {
                type: String,
                default: '确认清空历史记录吗?'
            }
        },
        methods: {
            yes(){
                this.$store.commit('setConfirm',confirm.hide)
                this.$emit('confirm',confirm.yes)

            },
            no(){
                this.$store.commit('setConfirm',confirm.hide)
                this.$emit('confirm',confirm.no)
            }
        }
    }
</script>

<style scoped lang="stylus">
@import "~common/stylus/variable"
  .confirm
    position fixed
    top 0
    bottom 0
    left 0
    right 0
    background rgba(7,7,7,0.6)
    display flex
    justify-content center
    align-items center
    z-index 50
    .wrapper
      width 50%
      border 1px solid $color-theme-d
      background $color-background
      color $color-theme
      .title
        text-align center
        line-height 44px
        border-bottom 1px solid $color-theme
      .options
        position relative
        height 44px
        display flex
        justify-content space-around
        align-items center
        &::before
          content ''
          position absolute
          width 1px
          background $color-theme
          height 100%

</style>
